<template>
  <div>
    <div id="myChart2" style="width: 374px;height: 250px;"></div>
  </div>
</template>

<script>
export default {
    props: {
        lineData:{
			type:Array,
			default:[]
		},
		legend:{
			type:Array,
			default:[]
		}
    },
    data() {
        return {
            obj:[]
        }
    },
	mounted() {
		this.drawLine()
	},
    methods: {
        drawLine(){
        	var that = this
			// 基于准备好的dom，初始化echarts实例
        	var chartDom = document.getElementById('myChart2');
            let myChart2 = this.$echarts.init(chartDom)
			for (var i = 0; i < this.lineData.length; i++) {
				let obj = {
					name:this.lineData[i].name,
					type: 'line',
					smooth: true,
					symbol: 'none',
					// stack: '总量',
					data: this.lineData[i].data,
					areaStyle:{
						opacity: 0.4,
						color: {
						    type: 'linear',
						    x: 0,
						    y: 0,
						    x2: 0,
						    y2: 1,
						    colorStops: [],
						    global: false // 缺省为 false
						}
					},
					lineStyle: {
					  color: this.lineData[i].lineStyle
					},
					itemStyle: {
					  color: this.lineData[i].lineStyle
					}
				}
				for (var j = 0; j < this.lineData[i].colorStops.length; j++) {
					let offset = {
						offset: j, color: this.lineData[i].colorStops[j] // 0% 处的颜色
					}
					obj.areaStyle.color.colorStops.push(offset)
				}
				this.obj.push(obj)
				console.log(this.obj);
			}
            // 绘制图表
            myChart2.setOption({
        		/* legend: {
        			data:this.legend,
        			right: "8%",
        			icon: "circle",
        			textStyle: {
        			    color: ["rgb(202,146,61)","rgb(80,118,210)"]	
        			}
        		}, */
        		xAxis: {
        			type: 'category',
        		    data: ['7/1', '7/2', '7/3', '7/4', '7/5', '7/6', '7/7']
        		},
        		yAxis: {
        			// min:60,	//y轴最小值
        			// max:85,	//y轴最大值
        			show:true,	//y轴显示
        		    type: 'value',	//y轴数据类型
        			name:'健康度(分)',	//y轴名称
        			nameLocation: "end",	//y轴位置（start，middle，center，end）
        			nameTextStyle: {	//y轴名称样式
        			    color: "rgba(31, 53, 112, 1)",	//y轴名称颜色
        			},
        			maxInterval: 20,	//y轴数据间隔
        			axisLine: {
        			    show: false,	//y轴线隐藏
        			},
        			splitLine: {
        			  show: true,	//y轴分割线
					  interval: 2,
        			  lineStyle: {
        				type: "dashed",	//分割线虚线
        				color: "rgba(31, 53, 112, 1)",
        			  }
        			},
        			axisLabel: {
        			  show: true,
        			  color: "rgba(31, 53, 112, 1)"
        			}
        		},
        		series: this.obj
            });
        }
    }
}
</script>
<style scoped lang="scss">
	#myChart2{
		margin: 0 auto;
	}
</style>
